<!DOCTYPE html>
<!--
    Licensed to the Apache Software Foundation (ASF) under one
    or more contributor license agreements.  See the NOTICE file
    distributed with this work for additional information
    regarding copyright ownership.  The ASF licenses this file
    to you under the Apache License, Version 2.0 (the
    "License"); you may not use this file except in compliance
    with the License.  You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

    Unless required by applicable law or agreed to in writing,
    software distributed under the License is distributed on an
    "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
     KIND, either express or implied.  See the License for the
    specific language governing permissions and limitations
    under the License.
-->
<html lang="en-US">

<head>
    <!--
        Customize this policy to fit your own app's needs. For more guidance, see:
            https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
        Some notes:
            * gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
            * https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
            * Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
                * Enable inline JS: add 'unsafe-inline' to default-src
        -->
    <meta charset="UTF-8">
    <meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
    <meta name="format-detection" content="telephone=no">
    <meta name="msapplication-tap-highlight" content="no">
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
    <link rel="stylesheet" type="text/css" href="css/index.css">
    <link rel="stylesheet" type="text/css" href="css/iview.css">
    <title>Noatin Controller</title>
    <script type="text/javascript" src="cordova.js"></script>
    <script type="text/javascript" src="js/zepto.min.js"></script>
    <script type="text/javascript" src="js/data.js"></script>
    <script type="text/javascript" src="js/vue.min.js"></script>
    <script type="text/javascript" src="js/iview.min.js"></script>
    <script type="text/javascript" src="js/hardwareMessage.js"></script>
</head>

<body>
    <div id="app" class="showHelp">
        <div id="log" class="blink" v-if="showLog">
            {{log}}
        </div>

        <div id="keyboard">
            <div v-if="keyboardName == 'fullKeyboard'" id="fullKeyboard" class="keyboardContent portrait">
                <img src="img/fullKeyboard.png" class="bg" />
            </div>
            <div v-if="keyboardName == 'miCtrl'" id="miCtrl" class="keyboardContent portrait">
                <img src="img/miCtrl.jpg" class="bg" />
                <div class="keyboardLayout">
                    <div class="button" data-keycode="37" style="top: 25%;height: 8%;width: 35%;left: 0;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">左</div>
                    <div class="button" data-keycode="39" style="top: 25%;height: 8%;width: 35%;left: 65%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">右</div>
                    <div class="button" data-keycode="38" style="top: 17%;height: 8%;width: 35%;left: 33%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">上</div>
                    <div class="button" data-keycode="40" style="top: 33%;height: 8%;width: 35%;left: 33%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">下</div>
                    <div class="button" data-keycode="9" style="top: 40%;height: 8%;width: 35%;left: 65%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">选择</div>
                    <div class="button" data-keycode="13" style="top: 25%;height: 8%;width: 35%;left: 33%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">开始</div>
                    <div class="button" data-keycode="8" style="top: 40%;height: 8%;width: 35%;left: 33%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">退格</div>
                    <div class="button" data-keycode="36" style="top: 40%;height: 8%;width: 35%;left: 0;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">Home</div>
                    <div class="button" data-keycode="27" style="top:2%;height: 8%;width: 35%;left: 33%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">ESC</div>
                    <div class="button" data-keycode="17" style="top: 10%;height: 8%;width: 35%;left: 33%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">Ctrl</div>
                    <div class="button" data-keycode="187" style="top: 48%;height: 8%;width: 35%;left: 33%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">=</div>
                    <div class="button" data-keycode="189" style="top: 56%;height: 8%;width: 35%;left: 33%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">-</div>
                </div>
            </div>
            <div v-if="keyboardName == 'fcCtrl'" id="fcCtrl" class="keyboardContent portrait">
                <img src="img/fcCtrl.jpg" class="bg" />
                <div class="keyboardLayout">
                    <div class="button" data-keycode="37" style="top: 7%;height: 8%;width: 25%;left: 27%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">左</div>
                    <div class="button" data-keycode="39" style="top: 22%;height: 8%;width: 25%;left: 27%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">右</div>
                    <div class="button" data-keycode="38" style="top: 14.5%;height: 8%;width: 25%;left: 47%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">上</div>
                    <div class="button" data-keycode="40" style="top: 14.5%;height: 8%;width: 25%;left: 7%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">下</div>
                    <div class="button" data-keycode="9" style="top: 37%;height: 11%;width: 13%;left: 19%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">选择</div>
                    <div class="button" data-keycode="13" style="top: 52%;height: 11%;width: 13%;left: 19%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">开始</div>
                    <div class="button" data-keycode="65" style="top: 86%;height: 10%;width: 29%;left: 10%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">A</div>
                    <div class="button" data-keycode="65" style="top: 86%;height: 10%;width: 29%;left: 54%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">TurboA</div>
                    <div class="button" data-keycode="66" style="top: 71%;height: 10%;width: 29%;left: 10%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">B</div>
                    <div class="button" data-keycode="66" style="top: 71%;height: 10%;width: 29%;left: 54%;" @touchstart="buttonDown" @touchcancel="buttonUp"
                        @touchend="buttonUp">TurboB</div>
                </div>
            </div>
            <div v-if="keyboardName == 'numberOnly'" id="numberOnly" class="keyboardContent landscape">
                <img src="img/number.png" class="bg" />
            </div>
        </div>
        <dropdown style="height:auto;" id="mainDropdown" trigger="click" placement="bottom-end" @on-click="mainDropdownMethod">
            <svg style="height:35px;width:35px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path :fill="mainDropdownColor" d="M64 384h384v-42.666H64V384zm0-106.666h384v-42.667H64v42.667zM64 128v42.665h384V128H64z"
                />
            </svg>

            <dropdown-menu id="mainMenu" slot="list">
                <dropdown-item name="openDeviceList">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M256 96c-81.5 0-163 33.6-221.5 88.3-3.3 3-3.4 8.1-.3 11.4l26.7 27.9c3.1 3.3 8.3 3.4 11.6.3 23.3-21.6 49.9-38.8 79.3-51 33-13.8 68.1-20.7 104.3-20.7s71.3 7 104.3 20.7c29.4 12.3 56 29.4 79.3 51 3.3 3.1 8.5 3 11.6-.3l26.7-27.9c3.1-3.2 3-8.3-.3-11.4C419 129.6 337.5 96 256 96z"
                        />
                        <path d="M113.2 277.5l28.6 28.3c3.1 3 8 3.2 11.2.3 28.3-25.1 64.6-38.9 102.9-38.9s74.6 13.7 102.9 38.9c3.2 2.9 8.1 2.7 11.2-.3l28.6-28.3c3.3-3.3 3.2-8.6-.3-11.7-37.5-33.9-87.6-54.6-142.5-54.6s-105 20.7-142.5 54.6c-3.3 3.1-3.4 8.4-.1 11.7zM256 324.2c-23.4 0-44.6 9.8-59.4 25.5-3 3.2-2.9 8.1.2 11.2l53.4 52.7c3.2 3.2 8.4 3.2 11.6 0l53.4-52.7c3.1-3.1 3.2-8 .2-11.2-14.8-15.6-36-25.5-59.4-25.5z"
                        />
                    </svg>
                    <br/>连接设备</dropdown-item>
                <!--
                <dropdown-item name="fullKeyboard">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M437.334 416C460.803 416 480 396.803 480 373.334V106.668C480 83.199 460.803 64 437.334 64H74.666C51.197 64 32 83.199 32 106.668v266.666C32 396.803 51.197 416 74.666 416H0c0 23.469 64 32 96 32h320c32 0 96-8.531 96-32h-74.666zM74.666 106.668h362.668v271.998H74.666V106.668zM256 434.666c-11.729 0-21.333-9.604-21.333-21.334 0-11.729 9.604-21.332 21.333-21.332s21.333 9.604 21.333 21.332c0 11.73-9.604 21.334-21.333 21.334z"
                        />
                    </svg>
                    <br/>全键盘</dropdown-item>
                <dropdown-item name="numberOnly">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M368 48H144c-26.6 0-48 21.6-48 48v320c0 26.4 21.4 48 48 48h224c26.4 0 48-21.6 48-48V96c0-26.4-21.4-48-48-48zM200 416h-48v-48h48v48zm0-88h-48v-48h48v48zm0-88h-48v-48h48v48zm80 176h-48v-48h48v48zm0-88h-48v-48h48v48zm0-88h-48v-48h48v48zm80 176h-48V280h48v136zm0-176h-48v-48h48v48zm0-96H152V96h208v48z"
                        />
                    </svg>
                    <br/>数字键盘</dropdown-item>
                    -->
                <dropdown-item name="fcCtrl">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M369.3 146H142.7C81.5 146 32 191.5 32 255.4c0 64 49.5 110.6 110.7 110.6h226.5c61.2 0 110.7-46.6 110.7-110.6.1-63.9-49.4-109.4-110.6-109.4zM200 266.7c0 2.7-2.4 5.3-5.2 5.3H160v35.1c0 2.8-3.1 4.9-5.8 4.9h-21.4c-2.6 0-4.8-1.9-4.8-4.5V272H92.9c-2.8 0-4.9-3.1-4.9-5.8v-21.4c0-2.6 1.9-4.8 4.5-4.8H128v-34.8c0-2.8 1.9-5.2 4.6-5.2h22.1c2.7 0 5.3 2.4 5.3 5.2V240h34.8c2.8 0 5.2 1.9 5.2 4.6v22.1zm119.8 8.8c-10.7 0-19.5-8.6-19.5-19.2s8.7-19.2 19.5-19.2 19.5 8.6 19.5 19.2-8.8 19.2-19.5 19.2zm42.5 41.8c-10.7 0-19.5-8.5-19.5-19.1 0-10.6 8.7-19.2 19.5-19.2s19.5 8.5 19.5 19.2c0 10.6-8.7 19.1-19.5 19.1zm0-83.7c-10.7 0-19.5-8.6-19.5-19.1 0-10.6 8.7-19.2 19.5-19.2s19.5 8.6 19.5 19.2c0 10.5-8.7 19.1-19.5 19.1zm42.6 41.9c-10.7 0-19.4-8.6-19.4-19.2s8.7-19.2 19.4-19.2 19.5 8.6 19.5 19.2c-.1 10.6-8.8 19.2-19.5 19.2z"
                        />
                    </svg>
                    <br/>红白机手柄
                </dropdown-item>
                <dropdown-item name="miCtrl">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M439.3 76H72.7C50.3 76 32 94 32 116v240c0 22 18.3 40 40.7 40h101.8v40h162.9v-40h101.8c22.4 0 40.5-18 40.5-40l.2-240c.1-22-18.2-40-40.6-40zm0 280H72.7V116h366.5v240z"
                        />
                    </svg>
                    <br/>小米遥控器
                </dropdown-item>
                <dropdown-item name="smartConfig">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M88 128h48v256H88zM232 128h48v256h-48zM160 144h48v224h-48zM304 144h48v224h-48zM376 128h48v256h-48z" />
                        <path d="M104 104V56H16v400h88v-48H64V104zM408 56v48h40v304h-40v48h88V56z" />
                    </svg>
                    <br/>智能配置
                </dropdown-item>
            </dropdown-menu>
        </dropdown>
        <card id="deviceSelector" v-if="selectDevice" class="fullScreen">
            <a @click="backToMain" class="backToMain">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M401.4 224h-214l83-79.4c11.9-12.5 11.9-32.7 0-45.2s-31.2-12.5-43.2 0L89 233.4c-6 5.8-9 13.7-9 22.4v.4c0 8.7 3 16.6 9 22.4l138.1 134c12 12.5 31.3 12.5 43.2 0 11.9-12.5 11.9-32.7 0-45.2l-83-79.4h214c16.9 0 30.6-14.3 30.6-32 .1-18-13.6-32-30.5-32z"
                    />
                </svg>
            </a>
            <hr>
            <span id="InputIpWarp">
                <i-input v-model="inputedIp" class="name" name="ip" id="InputedIP" width="150"></i-input>
                <i-button id="UseInputIP" @click="UseInputIP">连接</i-button>
            </span>
            <i-menu mode="horizontal" theme="light" @on-select="connectDevice">
                <menu-item class="device" v-for="device in devices" :name="device.name">
                    <span class="name">{{device.name}} </span>
                    <span class="ip">{{device.ipv4Addresses[0]}}</span>
                    <spin class="deviceState connectingDevice" v-if="device.connectionState === 'connecting'"></spin>
                    <span class="deviceState connectionErrorDevice" v-if="device.connectionState === 'error'">
                        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                            <path fill="red" d="M256 48C140.559 48 48 140.559 48 256c0 115.436 92.559 208 208 208 115.435 0 208-92.564 208-208 0-115.441-92.564-208-208-208zm104.002 282.881l-29.12 29.117L256 285.117l-74.881 74.881-29.121-29.117L226.881 256l-74.883-74.881 29.121-29.116L256 226.881l74.881-74.878 29.12 29.116L285.119 256l74.883 74.881z"
                            />
                        </svg>
                        {{device.error}}</span>
                    <span class="deviceState connectedDevice ivu-steps-icon ivu-icon ivu-icon-ios-checkmark-empty" v-if="device.connectionState === 'connected'"></span>
                </menu-item>
            </i-menu>
        </card>
        <card id="smartConfigWindow" v-if="showSmartConfigWindow" class="fullScreen">

            <a @click="backToMain" class="backToMain">
                <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                    <path d="M401.4 224h-214l83-79.4c11.9-12.5 11.9-32.7 0-45.2s-31.2-12.5-43.2 0L89 233.4c-6 5.8-9 13.7-9 22.4v.4c0 8.7 3 16.6 9 22.4l138.1 134c12 12.5 31.3 12.5 43.2 0 11.9-12.5 11.9-32.7 0-45.2l-83-79.4h214c16.9 0 30.6-14.3 30.6-32 .1-18-13.6-32-30.5-32z"
                    />
                </svg>
            </a>
            <hr>
            <i-menu mode="horizontal" theme="light" @on-select="configWifi">
                <menu-item class="device" v-for="wifiPoint in wifi" :name="wifiPoint.SSID">
                    SSID:{{wifiPoint.SSID}}
                </menu-item>
            </i-menu>
        </card>
        <Modal id="smardPasswordWindow" v-model="showSmardPasswordWindow" title="输入密码" @on-ok="connectWifi" @on-cancel="stopConnectingWifi">
            <i-input type="password" v-model="connectingWifi.password" placeholder="Enter Password..."></i-input>
        </Modal>
    </div>
    <div id="loading"></div>
</body>
<script type="text/javascript" src="js/index.js"></script>

</html>